import React from 'react';
import { inject, observer } from 'mobx-react';
import {toJS} from "mobx";
import {Table, Icon, Tabs, Spin, message, Button} from "antd";
import {WeaRightMenu,WeaTools,WeaTop,WeaTab,WeaNewScroll,WeaDialog} from 'ecCom';
import ContractPage from "../bills/contractPage";
import Dynamic from "./dynamic/index";
import Risk from "./risk/index";
import AgreedBill from "./agreedBill/index";
import ActualBill from "./actualBill/index";
import Invoice from "./invoice/index";
import ChangeList from "./changeList/index";
import * as cct from '../../constants/CommonConstant';
// import weaCube from 'weaCube';
// const ExcelLayoutCom = weaCube.common.ExcelLayoutCom;

@inject('synergyStore','actualBillStore','invoiceStore','contractPageStore')
@observer
class Synergy extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false
        }

        window._contractSynergy={
            loadSynergyDialog:this.loadSynergyDialog
        }

    }

    showCardCallBack=(billId)=>{
        message.success('保存成功');
        const {synergyStore,actualBillStore,invoiceStore,contractPageStore} = this.props;
        const from = synergyStore.dialog.from;
        const refId = synergyStore.initInfo.refId;
        if(billId){
            synergyStore.clearDialog();
        }else{
            synergyStore.reloadCard();
        }
        this.props[from].init(refId);
    }



    
    loadSynergyDialog=(params,from)=>{
        const {initCard} = this.props.synergyStore; 
        initCard(params,from);
        window._cubeCard={
            reLoad:this.showCardCallBack
        }
    }
    
    componentDidMount() {
        if(window.weaCube){
            this.doInit(this.props);
        }else{
            eventRegister.loadModule('f_cube', ()=> {
                this.doInit(this.props);
            })
        }
        
    }
    
    doInit(props){
        const {initSynergy,initTabs} = props.synergyStore;
        const {isUse=false, isShow = false,custom,refId,title,tabKey} = props;
        initSynergy(isUse,isShow,custom,refId,title,tabKey);
        initTabs(refId,tabKey);
    }

    componentWillUnmount(){
        window._contractSynergy={};
        window._cubeCard={};
        const {clearStore} = this.props.synergyStore;
        clearStore();
    }

    componentWillReceiveProps(nextProps) {
        const {initSynergy,initTabs} = this.props.synergyStore;
        const {isUse=false, isShow = false,custom,refId,title,tabKey} = nextProps;
        if (this.props.refId !== nextProps.refId||this.props.title !== nextProps.title||
            this.props.isUse !== nextProps.isUse||this.props.isShow !== nextProps.isShow||
            this.props.tabKey !== nextProps.tabKey){
            // this.props.custom !== nextProps.custom||
            initSynergy(isUse,isShow,custom,refId,title,tabKey);
        }

        if(this.props.refId !== nextProps.refId){
            initTabs(nextProps.refId,nextProps.tabKey);
        }
    }
    
    isShowSynergy(isShow) {
        const {synergyStore} = this.props;
        synergyStore.isShowSynergy(isShow);
    }

    changeImgUrl(type, event) {
        if ('hideOver' == type) {
            event.target.attributes['src'].value = '/wui/theme/ecology9/image/left-hide-hover.png';
        } else if ('showOver' == type) {
            event.target.attributes['src'].value = '/wui/theme/ecology9/image/left-show-hover.png';
        } else if ('hideOut' == type) {
            event.target.attributes['src'].value = '/wui/theme/ecology9/image/left-hide.png';
        } else if ('showOut' == type) {
            event.target.attributes['src'].value = '/wui/theme/ecology9/image/left-show.png';
        }
    }

    render() {
        let that = this;
        const {synergyStore,actualBillStore} = this.props;
        const {leftMenuInfo,tabsInfo,tabKey,initInfo,dialog,Card} = synergyStore;
        const {isUse,isShow,custom,refId,title} = initInfo;
        let sWidth = `${custom}px`;
        let btnRight = `${custom-17}px`;
        let showway = isShow?"block":"none";
        const tabs = toJS(tabsInfo);
        let tabUrl = function(key){
            if(tabs){
                for(let i=0;i<tabs.length;i++){
                    if(tabs[i].sequence == key && tabs[i].shortname=="base"){
                        return <ContractPage pageWidth={custom} refId={refId} />;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="dynamic"){
                        return <Dynamic refId={refId}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="risk"){
                        return <Risk refId={refId}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="plan"){
                        return <AgreedBill refId={refId} payType={tabs[i].payType||'1'}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="pay"){
                        return <ActualBill refId={refId} payType={tabs[i].payType||'1'}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="ticket"){
                        return <Invoice refId={refId}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname=="change"){
                        return <ChangeList refId={refId}/>;
                    }else if(tabs[i].sequence == key && tabs[i].shortname==""){
                        return tabs[i].address;
                    }
                }
                return "";
            }
        }(tabKey);

        if (isUse) {
            return (
                <div style={{position: 'absolute', top: 0, right: 0, height: '100%'}}>
                    <div ref="synergy" style={{display: `${showway}`, position: 'absolute', top: 0, right: 0, zIndex: 998, width: sWidth, height: '100%', overflow: 'auto', background: '#fff', boxShadow: '0 0 5px #ddd'}}>
                        <WeaRightMenu datas={this.getRightMenu()} onClick={this.rightMenuClick()}>
                            <WeaTop
                                title={title}
                                loading={false}
                                icon={<i className={cct.icon}  />}
                                iconBgcolor={cct.iconBgcolor}
                                buttons={[]}
                                buttonSpace={10}
                                showDropIcon={true}
                                dropMenuDatas={this.getRightMenu().slice()}
                                onDropMenuClick={this.rightMenuClick()}
                            >
                                <WeaTab 
                                    datas={tabsInfo}
                                    selectedKey={tabKey}
                                    keyParam="sequence"
                                    onChange={(tabKey)=>this.changeTab(tabKey)}
                                />
                                
                                    <div style={{height:'calc(100% - 51px)'}} className="wea-contract-req-content">
                                        <div className='wea-contract-req-content-inner'>
                                            <WeaNewScroll height='100%' toTop={true}>
                                            {
                                                typeof tabUrl === "object" ?  tabUrl:
                                                <iframe src={tabUrl} id="crmtabiframe" name="crmtabiframe" className="flowFrame" frameborder="0" width="100%" height="100%" />
                                            }
                                            </WeaNewScroll>
                                        </div>
                                        
                                    </div>
                            </WeaTop>
                            <WeaDialog
                                icon = {cct.icon}
                                iconBgcolor={cct.iconBgcolor}
                                onCancel={()=> synergyStore.clearDialog()}
                                title={"新建"}
                                visible={dialog.visible}
                                style={{width: 1100, height: 700}}
                                hasScroll
                                buttons={[
                                    (<Button type="ghost" onClick={()=>synergyStore.clearDialog()}>关闭</Button>)
                                ]}
                            >
                            {(window.weaCube&&<WeaRightMenu datas={Card.cardTab.rightMenus.slice()} onClick={Card.cardTab.rightMenuHandle}>
                                    <div className="wea-contract-contractPage">
                                        <div className="coms-mode-docker coms-mode-card wea-contract-contractPage-detail"> 
                                            <Spin spinning={Card.loading}>{Card.isInit ? <ExcelLayoutCom Card={Card} />:<div style={{marginTop:'50%'}}  />}</Spin> 
                                        </div>
                                    </div>
                                </WeaRightMenu>)}
                            </WeaDialog>
                        </WeaRightMenu>
                    </div>
                    <div ref="synergyHide" style={{display: `${isShow?"block":"none"}`, position: 'absolute', top: '50%', right: btnRight, zIndex: 999, cursor: 'pointer'}} title="隐藏右侧栏" onClick={this.isShowSynergy.bind(this, false)}>
                        <img src="/wui/theme/ecology9/image/left-hide.png" alt="" onMouseOver={this.changeImgUrl.bind(this, 'hideOver')} onMouseOut={this.changeImgUrl.bind(this, 'hideOut')}/>
                    </div>
                    <div ref="synergyShow" style={{display: `${isShow?"none":"block"}`,position: 'absolute', top: '50%', right: 0, zIndex: 999, cursor: 'pointer'}} title="显示右侧栏" onClick={this.isShowSynergy.bind(this, true)}>
                        <img src="/wui/theme/ecology9/image/left-show.png" alt="" onMouseOver={this.changeImgUrl.bind(this, 'showOver')} onMouseOut={this.changeImgUrl.bind(this, 'showOut')}/>
                    </div>
                </div>
            );
        } else {
            return <div></div>;
        }
    }

    changeTab=(tabKey)=>{
        const {changeTab} = this.props.synergyStore;
        changeTab(tabKey);
    }

    rightMenuClick=()=>{
        let btns = [];
        const {synergyStore,actualBillStore,invoiceStore,contractPageStore} = this.props;
        let {tabsInfo,tabKey} = synergyStore;
        tabsInfo = toJS(tabsInfo);
        tabsInfo.map(item=>{
            if( item.sequence == tabKey && item.shortname == "base"){
                const {Card} = contractPageStore;
                btns = Card.isInit?Card.cardTab.rightMenuHandle:[];
                return;
            }
        })

        return btns;
            
    }

    getRightMenu=()=>{
        
        let btns = [];
        const {synergyStore,actualBillStore,invoiceStore,contractPageStore} = this.props;
        let {tabsInfo,tabKey} = synergyStore;
        tabsInfo = toJS(tabsInfo);
        tabsInfo.map(item=>{
            if( item.sequence == tabKey && item.shortname == "pay"){
                btns = actualBillStore.rightMeus;
                return;
            }else if( item.sequence == tabKey && item.shortname == "ticket"){
                btns = invoiceStore.rightMeus;
                return;
            }else if( item.sequence == tabKey && item.shortname == "base"){
                const {Card,modeInfo,billId} = contractPageStore;

                let rightMenus = [];
                if(window.weaCube&&Card.isInit&&Card.cardTab.rightMenus) {
                    rightMenus = Card.cardTab.rightMenus.slice();
                }
                // rightMenus.map(c=>{
                //     if(c.function.indexOf('toEdit')>0){
                //         let paramstr = `type=2&billid=${billId}&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}`;
                //         if(typeof(modeInfo.editLoyoutid)!=="undefined"){
                //             paramstr = `type=2&billid=${billId}&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}&layoutid=${modeInfo.editLoyoutid}`;
                //         }
                //         c.function="window.openFullWindowHaveBar('#/main/cube/card?"+paramstr+"','"+billId+"')";
                //     }
                //     if(c.function.indexOf('toDel')>0){
                //         rightMenus.remove(c);
                //     }
                // })

                btns = rightMenus;
                return;
            }
        })

        return btns;
            
    }
}

export default Synergy;